<template>
  <div>
    <form @submit.prevent="fn">
      <label>姓名：</label>
      <input v-model="form.uname" type="text" /><br /><br />

      <label>年龄：</label>
      <input v-model="form.age" type="number" /><br /><br />

      <label>身高：</label>
      <input v-model.number="form.height" type="text" />(米)<br /><br />

      <label>体重：</label>
      <input v-model.number="form.weight" type="text" />(公斤)<br /><br />

      <label>病史：</label>
      <input v-model="form.medicalHistory" type="text" /><br /><br />

      <button>诊断</button>
    </form>
    <p v-show="show">
      患者{{ form.uname }}的诊断结果：{{
        this.bmi > 24.9
          ? '过重'
          : this.bmi <= 24.9 && this.bmi >= 18.5
          ? '健康'
          : '过轻'
      }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      form: {
        uname: '',
        age: '',
        height: '',
        weight: '',
        medicalHistory: '',
      },
      bmi: '',
    }
  },
  methods: {
    fn() {
      this.show = true
      this.bmi = this.form.weight / (this.form.height * this.form.height)
    },
  },
}
</script>
